<template>
  <view class="my-report-page">
    <!-- 标题栏 -->
    <view class="header">
      <view class="back-btn" @click="onBack">
        <text class="iconfont">&#xe600;</text>
      </view>
      <text class="title">我的上报</text>
    </view>

    <!-- 报告列表 -->
    <view class="report-list">
      <view
        v-for="(report, index) in reportList"
        :key="index"
        class="report-item"
      >
        <view class="report-info">
          <view class="info-line">
            <image
              class="info-icon"
              src="../../assets/add-icon.png"
              mode="aspectFit"
            ></image>
            <!-- Placeholder for location icon -->
            <text class="label">房屋地址:</text>
            <text class="value">{{ report.address }}</text>
          </view>
          <view class="info-line">
            <image
              class="info-icon"
              src="../../assets/add-icon.png"
              mode="aspectFit"
            ></image>
            <!-- Placeholder for time icon -->
            <text class="label color999">上报时间:</text>
            <text class="value color999">{{ report.time }}</text>
          </view>
          <view class="line"></view>
        </view>

        <!-- 状态标签 -->
        <view :class="['status-tag', report.statusClass]">
          <image
            class="status-tag-bg-img"
            src="../../assets/tag.png"
            mode="contain"
          ></image>
          {{ report.statusText }}
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button
            v-if="report.status === 'pending'"
            class="btn-cancel"
            @click="onCancelReport(report)"
          >
            取 消
          </button>
          <button
            v-if="report.status === 'processing'"
            class="btn-confirm"
            @click="onConfirmComplete(report)"
          >
            确认完成
          </button>
          <button
            v-if="report.status === 'completed'"
            class="btn-evaluate"
            @click="onEvaluate(report)"
          >
            评 价
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reportList: [
        {
          id: 1,
          address: "10号楼1011",
          time: "2025-11-10 14:30",
          status: "pending", // pending, processing, completed
          statusText: "待确认",
          statusClass: "status-pending",
        },
        {
          id: 2,
          address: "10号楼1011",
          time: "2025-11-09 14:30",
          status: "processing",
          statusText: "处理中",
          statusClass: "status-processing",
        },
        {
          id: 3,
          address: "10号楼1011",
          time: "2025-11-08 14:30",
          status: "completed",
          statusText: "已完成",
          statusClass: "status-completed",
        },
        // Add more mock data as needed
      ],
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    onCancelReport(report) {
      console.log("取消报告", report.id);
      // TODO: Implement cancel logic
    },
    onConfirmComplete(report) {
      console.log("确认完成", report.id);
      // TODO: Implement confirm complete logic
    },
    onEvaluate(report) {
      console.log("评价", report.id);
      // TODO: Implement evaluate logic
    },
  },
};
</script>

<style lang="scss">
.my-report-page {
  min-height: 100vh;
  background: #f3f3fa;
  padding-top: 100rpx; // Adjust based on header height
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .back-btn {
    position: absolute;
    left: 30rpx;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #222;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
  }
}

.report-list {
  padding: 20rpx 30rpx;
}

.report-item {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 26rpx 30rpx 15rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: relative; // Needed for absolute positioning of status tag

  .report-info {
    margin-bottom: 20rpx;
  }

  .info-line {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx; // Space between lines
    font-size: 28rpx;
    color: #333;

    .info-icon {
      width: 32rpx; // Adjust size as needed
      height: 32rpx; // Adjust size as needed
      margin-right: 10rpx;
    }

    .label {
      flex-shrink: 0;
      margin-right: 10rpx;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #333; // Label color
    }

    .value {
      flex: 1;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #333; // Value color
    }
    .color999 {
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
    }
  }
  .line {
    box-sizing: border-box;
    width: 100%;
    height: 2rpx;
    background: #f4f5fb;
    // margin-right: 30rpx;
  }
  // 媒体查询物理像素比为3的情况
  @media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
    .line {
      -webkit-height: 3rpx;
      height: 3rpx;
    }
  }
  .status-tag {
    position: absolute;
    top: 0;
    right: 0;
    width: 120rpx;
    height: 50rpx;
    line-height: 40rpx;
    text-align: center;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 600;
    // padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 24rpx;
    color: #fff; /* Keep text color white */
    overflow: hidden; /* Hide overflowing parts of the image */
    z-index: 1; /* Ensure tag is above other content */

    .status-tag-bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 120rpx;
      height: 100%;
      transform: rotateY(180deg); /* Rotate along the X-axis */
      z-index: -1; /* Place behind the text */
    }
  }

  // Keep status specific background colors commented out for now
  .status-pending {
    /* background-color: #ff9900; */
  }

  .status-processing {
    /* background-color: #007aff; */
  }

  .status-completed {
    /* background-color: #808080; */
  }

  .action-buttons {
    display: flex;
    justify-content: flex-end; // Align buttons to the right
    gap: 20rpx; // Space between buttons
    margin-top: 20rpx; // Space above buttons

    button {
      padding: 0 20rpx;
      width: 172rpx;
      height: 64rpx;
      line-height: 64rpx;
      font-size: 28rpx;
      border-radius: 30rpx;
      min-width: 120rpx; // Minimum button width
      text-align: center;
      margin-left: auto;
      margin-right: 0;
    }

    .btn-cancel {
      background-color: #fff;
      color: #999;
      border: 1px solid #999;
    }

    .btn-confirm {
      background-color: #007aff;
      color: #fff;
      border: none;
    }

    .btn-evaluate {
      background-color: #fff;
      color: #007aff;
      border: 1px solid #007aff;
    }
  }
}
</style>
